<template>
	<view class="vr-view">
		<block v-if="show">
			<view class="vr-view-box">
				<!-- #ifdef APP-PLUS || H5 -->
				<image
					class="icon" 
					src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/vr/vr-icon.png?v=3" 
					v-if="!isReview" 
					@click="goVrLink">
				</image>
				<!-- #endif -->
				<image :src="vrInfo.image" mode="aspectFill" class="image"></image>
			</view>
			<view class="vr-view-info">
				<view class="vr-view-info-tit">{{vrInfo.vr_name}}</view>
				<view class="vr-view-info-subtit">{{vrInfo.square}}㎡  {{vrInfo.space}}  {{vrInfo.style_name}}</view>
				<view class="vr-view-info-brief" v-if="vrInfo.brief">{{vrInfo.brief}}</view>
			</view>
			<view class="vr-view-pro">
				<pt-title name="VR商品" :isRight="false" leftSize="32" padding="40rpx 30rpx"></pt-title>
				<view class="vr-view-pro-list-box" v-if="vrInfo.goods.goods_list.length">
					<scroll-view class="vr-view-pro-list" scroll-x>
						<view class="vr-view-pro-item" v-for="(item,index) in vrInfo.goods.goods_list" :key="index" @click="goGoodsDetails(item.goods_type,item.goods_id)">
							<image :src="item.image" mode=""></image>
							<view class="vr-goods-name">{{item.goods_name}}</view>
							<view class="vr-goods-price">¥{{item.retail_price}}</view>
							<view class="vr-goods-click">人气{{item.click}}</view>
						</view>
					</scroll-view>
				</view>
				<view style="margin-top: -40rpx; padding-bottom: 30rpx;" v-else>
					<pt-nothing text="暂无数据" bgColor="#FFF"></pt-nothing>
				</view>
			</view>
			<view class="vr-recomment">
				<pt-title name="VR推荐" :isRight="false" leftSize="32" padding="40rpx 30rpx"></pt-title>
				<view class="vr-recomment-list" v-if="vrRecommentList.length">
					<pt-var :list="vrRecommentList" @Func="goVrInfo" :isVr="true" @scrolltolower="scrolltolower"></pt-var>
				</view>
				<view style="margin-top: -40rpx; padding-bottom: 30rpx;" v-if="!vrRecommentList.length">
					<pt-nothing text="暂无数据" bgColor="#FFFFFF"></pt-nothing>
				</view>
			</view>
			<view :class="['vr-info-comment',{noBorder: noMore && commentList.length}]">
				<pt-title name="热门评论" leftSize="32" padding="0 30rpx" :isRight="false"></pt-title>
				<view class="comment-list-box">
					<block v-if="commentList.length">
						<view class="comment-item" v-for="(data,index) in commentList" :key="index">
							<view class="comment-item-user">
								<image :src="data.portrait" mode="aspectFill"></image>
								<view class="comment-item-user-info">
									<view class="comment-item-user-name">{{data.user_name}}</view>
									<view class="comment-item-user-time">
										<text class="time">{{data.add_time}}</text>
									</view>
								</view>
							</view>
							<view class="comment-item-content">{{data.content}}</view>
							<view class="child_comment">
								<text class="label">回复：</text>
								<view>
									<view v-for="(item,i) in data.child_comment" :key="i">
										{{item.content}}
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
				<pt-nothing v-if="noMore && !commentList.length" :text="'暂无评论'" bg-color="#FFF"></pt-nothing>
			</view>
			<pt-loading-more v-if="isLoading"></pt-loading-more>
			<pt-nomore v-if="noMore && commentList.length"></pt-nomore>
			<view class="vr-info-form">
				<view class="vr-info-form-input">
					<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2020-08-14/20200814/b350ba7854abc7c9c6feaf38a0fcd015.png"></image>
					<input class="uni-input" confirm-type="send" @confirm="confirm" placeholder="说点什么..." v-model="content"/>
				</view>
				<!-- #ifdef APP-PLUS -->
				<view class="send" @click="confirm">发送</view>
				<!-- #endif -->
			</view>
		</block>
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isReview: false,
				show: false,
				vrInfo: '',
				content: '',
				goodsList: [],
				recommendPage: 0,
				vrRecommentList: [],
				commentPage: 0,
				commentList: [],
				isLoading: false,
				noMore: false,
				recommendNoMore: false
			};
		},
		onLoad(options) {
			this.vr_id = options.vr_id
			this.isReview = uni.getStorageSync('review')?uni.getStorageSync('review'):false
			this.init()
		},
		methods: {
			init(){
				this.$u.api.VrInfo({vr_id: this.vr_id}).then(res => {
					this.show = true
					this.vrInfo = res.datas
				}).then(() => {
					this.getRecommend()
					this.getComment()
				})
			},
			getRecommend(){
				this.$u.api.RecommendVr({vr_id: this.vr_id,page: this.recommendPage}).then(res => {
					if(res.datas.list.length){
						this.vrRecommentList = []
						res.datas.list.forEach(item => {
							this.vrRecommentList.push(item)
						})
					}else{
						this.recommendNoMore = true
					}
				})
			},
			getComment(){
				this.$u.api.VrCommentList({vr_id: this.vr_id,page: this.commentPage}).then(res => {
					this.isLoading = false
					if(res.datas.list.length){
						res.datas.list.forEach(item => {
							this.commentList.push(item)
						})
					}else{
						this.noMore = true
					}
				})
			},
			scrolltolower(){
				if(!this.recommendNoMore){
					this.recommendPage++
					this.getRecommend()
				}
			},
			goGoodsDetails(type,goods_id){
				if(type==0){
					getApp().goProInfo(goods_id)
				}else if(type==1){
					uni.navigateTo({
						animationDuration: 500,
						url: '/pages/package/n98-info?group_id='+goods_id
					})
				}else if(type==2){
					uni.navigateTo({
						animationDuration: 500,
						url: '/pages/package/house-info?group_id='+goods_id
					})
				}else if(type==3){
					getApp().goProInfo(goods_id,true)
				}
			},
			goVrInfo(vr_id,type){
				uni.navigateTo({
					animationDuration: 500,
					url: '/pages/vr-info/vr-info?vr_id=' + vr_id
				})
			},
			confirm(e){
				if(!this.content){
					uni.showToast({
						icon: 'none',
						title: '留言内容不能为空'
					})
					return
				}
				this.$u.api.UpComment({
					content: this.content,
					vr_id: this.vr_id
				}).then(res => {
					uni.showToast({
						icon: 'none',
						title: '评论成功'
					})
					this.content = ''
					this.commentPage = 0
					this.commentList = []
					this.noMore = false
					this.getComment()
				})
			},
			goVrLink(){
				uni.navigateTo({
					animationDuration: 500,
					url: '/pages/webview/webview?url='+encodeURIComponent(this.vrInfo.url)
				})
			}
		},
		onReachBottom() {
			if(!this.noMore){
				this.commentPage++
				this.isLoading = true
				this.getComment()
			}
		}
	}
</script>

<style lang="scss">
	.vr-view{
		padding-bottom: 120rpx;
	}
	.vr-view-box{
		position: relative;
		height: 600rpx;
		image.image{
			width: 100%;
			height: 600rpx;
		}
		image.icon{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			z-index: 2;
			width: 120rpx;
			height: 120rpx;
		}
	}
	.webview{
		width: 100%;
		height: 600rpx;
	}
	.vr-view-info{
		text-align: center;
		padding: 60rpx 60rpx 30rpx;
		.vr-view-info-tit{
			font-size: 42rpx;
			color: #141414;
			font-weight: bold;
		}
		.vr-view-info-subtit{
			color: #6B6B6B;
			font-size: 24rpx;
			margin: 30rpx 0;
		}
		.vr-view-info-brief{
			text-align: left;
			line-height: 52rpx;
			font-size: 24rpx;
			color: #444;
			border-bottom: solid 2rpx #F4F4F4;
			padding-bottom: 60rpx;
		}
	}
	.vr-view-pro,.vr-recomment{
		border-bottom: solid 20rpx #F4F4F4;
	}
	.vr-view-pro-list-box{
		padding: 0 30rpx 30rpx;
	}
	.vr-view-pro-list {
		white-space: nowrap;
		.vr-view-pro-item {
			display: inline-block;
			padding: 0 10rpx;
			width: 236rpx;
			box-sizing: border-box;
			image {
				display: block;
				width: 216rpx;
				height: 216rpx;
				border-radius: 8rpx;
			}
			.vr-goods-name {
				margin: 24rpx 0 30rpx 0;
				font-size: 24rpx;
				color: #28221F;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				text-align: center;
			}
			.vr-goods-price {
				margin-bottom: 30rpx;
				font-size: 24rpx;
				text-align: center;
				font-weight: bold;
				color: #141414;
			}
			.vr-goods-click {
				font-size: 22rpx;
				text-align: center;
				color: #9E9E9E;
			}
		}
	}
	.vr-info-form{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #FFF;
		z-index: 5;
		display: flex;
		align-items: center;
		height: 120rpx;
		background-color: #FFF;
		padding: 20rpx 30rpx;
		border-top: solid 2rpx #F4F4F4;
		.vr-info-form-input{
			flex: 1;
			min-width: 0;
			background-color: #F8F8F8;
			display: flex;
			align-items: center;
			height: 80rpx;
			padding: 0 30rpx;
			image{
				width: 29rpx;
				height: 28rpx;
			}
			input{
				flex: 1;
				min-width: 0;
				margin: 0 15rpx;
				font-size: 26rpx;
			}
		}
		.send{
			font-size: 28rpx;
			margin-left: 20rpx;
			color: #141414;
		}
	}
	.vr-info-comment{
		background-color: #FFF;
		padding: 30rpx 0;
		border-bottom: solid 20rpx #F4F4F4;
		&.noBorder{
			border-bottom: none;
		}
	}
	.comment-list-box{
		.comment-item{
			padding: 30rpx;
			margin: 50rpx 30rpx 0;
			position: relative;
			background-color: #F2F2F2;
			border-radius: 8rpx;
			&::after{
				content: '';
				position: absolute;
				bottom: 0;
				right: 30rpx;
				left: 116rpx;
				height: 2rpx;
				background-color: #F4F4F4;
			}
			&:last-child::after{
				display: none;
			}
			.comment-item-user{
				display: flex;
				align-items: center;
				image{
					width: 66rpx;
					height: 66rpx;
					border-radius: 50%;
				}
				.comment-item-user-info{
					flex: 1;
					min-width: 0;
					margin-left: 20rpx;
					.comment-item-user-name{
						font-size: 24rpx;
						font-weight: bold;
						color: #333;
						margin-bottom: 10rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.time{
							font-weight: normal;
							color: #999;
						}
					}
					.comment-item-user-time{
						font-size: 22rpx;
						color: #909090;
						text{
							margin-right: 20rpx;
						}
					}
				}
			}
			.comment-item-content{
				margin-left: 86rpx;
				padding: 30rpx 0 0;
				font-size: 28rpx;
				line-height: 48rpx;
				color: #141414;
			}
			.child_comment{
				margin-left: 86rpx;
				margin-top: 40rpx;
				display: flex;
				.label{
					color: #999;
				}
			}
			.comment-item-imgs{
				margin-left: 86rpx;
				image{
					width: 188rpx;
					height: 188rpx;
					border-radius: 4rpx;
					margin-right: 20rpx;
					margin-top: 40rpx;
					&:nth-child(3n){
						margin-right: 0;
					}
				}
			}
			.comment-reply{
				margin-left: 86rpx;
				margin-top: 40rpx;
				padding: 25rpx;
				position: relative;
				background-color: #F8F8F8;
				color: #757575;
				font-size: 24rpx;
				line-height: 48rpx;
				&::after{
					position: absolute;
					content: '';
					width: 0;
					height: 0;
					border-left: 10rpx solid transparent;
					border-right: 10rpx solid transparent;
					border-bottom: 10rpx solid #F8F8F8;
					top: -10rpx;
					left: 20rpx;
				}
			}
		}
	}
</style>
